<template>
	<view class="shanchang">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
	  <uni-nav-bar left-icon="back" backgroundColor="#fff" color="#101010" :fixed='true' right-text="保存" title="所属区域" @clickRight="save"@ clickLeft="back"></uni-nav-bar>
	  <view class="scroll-panel" id="scroll-panel">
	  	<view class="list-box">
	  		<view class="left">
	  			<scroll-view scroll-y="true" 
	  			:style="{ 'height':scrollHeight }"
	  			:scroll-into-view="leftIntoView"
	  			:scroll-with-animation="true"
	  			>
	  				<view class="item" 
	  					v-for="(item,index) in leftArray"
	  					:key="index" 
	  					:class="{ 'active':index==leftIndex }" 
	  					:id="'left-'+index"
	  					:data-index="index"
	  					@tap="leftTap"
	  				>{{item.name}}</view>
					
	  	        </scroll-view>
	  		</view>
			<view class="main">
						<scroll-view  scroll-y="true" :style="{ 'height':scrollHeight }">
							<view class="item" >
							
								<view class="goods" v-for="(item2,index2) in midList" :key="index2"@tap="midTap(index2)"  :class="{ 'active':index2==midIndex }">
									<view >{{item2.name}}</view>
								</view>
								
							
							</view>
						</scroll-view>
					
			</view>
	  		<view class="main1 main">
	  			
	  					<scroll-view  scroll-y="true" :style="{ 'height':scrollHeight }">
	  						<view class="item">
						<!-- 	 <checkbox-group @change="checkboxChange"> -->
	  							<view class="goods" v-for="(item2,index2) in rightList":key="index2" @click="changeType(index2,item2)">
	  								<view style="margin-left: 40upx;">{{item2.name}}</view>
									<checkbox :checked="item2.have" :value="item2.id+''"  style="transform:scale(0.8;margin-right: 8upx;" />
	  							</view>
								<!-- </checkbox-group> -->
	  						</view>
	  					</scroll-view>
	  			
	  			</swiper>
	  		</view>
	  	</view>
	  </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollHeight:'400px',
				leftArray:[],
				mainArray:[],
				leftIndex:0,
				check:false,
				arrLIst:[],
				rightList:[],
				midList:[],
				midIndex:0,
				id:''
			}
			
			},
			onLoad(e) {
				this.id = e.id
			},
			computed:{
				/* 计算左侧滚动位置定位 */
				leftIntoView(){
					return `left-${this.leftIndex > 5 ? (this.leftIndex-5):0}`;
				},
				clickIndex(){
					var left = this.leftIndex
					var mid = this.midIndex
					return {left,mid}
					}
			},
			onLoad(){
				this.arrLIst=[]
				this.scrollHeight="calc(100vh - 40px)"
				/* 等待DOM挂载完成 */
				this.$nextTick(()=>{
					/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
					setTimeout(()=>{
						/* 等待滚动区域初始化完成 */
						this.initScrollView().then(()=>{
							/* 获取列表数据，你的代码从此处开始 */
							if(!this.id){
								this.getListData();
							}else{
								this.getData();
							}
							
						})
					},400);
				})
			},
			watch:{
				clickIndex:function(val,old){
					
					var leftData = this.leftArray[old.left].shi_list
				
					for (var i=0;i<leftData.length;i++ ){
							if(leftData[i].qu_list){
								for(var j =0;j<leftData[i].qu_list.length;j++){
									
									if(leftData[i].qu_list[j].have==true){
										
										this.$set(leftData[i].qu_list[j],"have",false)
									}
								}
							}
						
						
					
						
					}
					}
				},
			methods:{
				getData(){
					this.$store.dispatch("getServerInfo",{sp_id:this.id}).then(res=>{
							if(res.code==1){
								console.log(res.data.basic.bind_area)
								this.leftArray=res.data.basic.bind_area
								this.midList=this.leftArray[0].shi_list
								this.rightList = this.midList[0].qu_list
								console.log(res)
								
							}
						})
					},
				
				back(){
					uni.navigateBack({})
					},
					changeType(index,val){
						if(val.have==true){
							this.arrLIst.splice(this.arrLIst.length-1,1)
							this.$set(this.rightList[index],"have",false)
						}else{
							this.arrLIst.push(val.id)
							this.$set(this.rightList[index],"have",true)
						}
					},
					checkboxChange(e){
						console.log(e)
						this.arrLIst= e.detail.value
						},
						/* 初始化滚动区域 */
						initScrollView(){
							return new Promise((resolve, reject)=>{
								let view = uni.createSelectorQuery().select('#scroll-panel');
								view.boundingClientRect(res => {
									this.scrollHeight = `${res.height}px`;
									this.$nextTick(()=>{
										resolve();
									})
								}).exec();
							});
						},
						/* 获取列表数据 */
						getListData(){
							  this.$store.dispatch("getAllArea").then(res=>{
							    if(res.code==1){
									this.leftArray=res.data
									this.midList=this.leftArray[0].shi_list
									this.rightList = this.midList[0].qu_list
							    }
							  })
						},
						/* 左侧导航点击 */
						leftTap(e){
							let index=e.currentTarget.dataset.index;
							this.midList=this.leftArray[index].shi_list
							this.rightList=[]
							this.rightList=this.midList[0].qu_list
							this.leftIndex=Number(index);
							this.midIndex=0
							
						},
						midTap(e){
							
							this.rightList=this.midList[e].qu_list
							this.midIndex=Number(e);
						},
						/* 轮播图切换 */
						swiperChange(e){
							let index=e.detail.current;
							this.leftIndex=Number(index);
							
						},
						save(){
							if(this.arrLIst.length==0){
								uni.showToast({
									icon:"none",
									title:"不能为空"
								})
								return
							}
							
							uni.$emit("showQY",this.arrLIst)
							uni.navigateBack({})
						},
						
						
					
				}
		
		}
	 
</script>

<style lang="less">
		page,.shanchang{
			height: 100%;
		}
		/* 容器 */
		.shanchang{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			box-sizing: border-box;
			padding-top: var(--status-bar-height);
			&>view{
				width: 100%;
			}
			
			.scroll-panel{
				flex-grow: 1;
				height: 0;
				overflow: hidden;
			}
			
			.bottom-panel{
				padding-bottom: 0;
				padding-bottom: constant(safe-area-inset-bottom);  
				padding-bottom: env(safe-area-inset-bottom);		
			}
		}
			
		.list-box{
			display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    justify-content: flex-start;
		    align-items: flex-start;
		    align-content: flex-start;
			font-size: 28rpx;
			height: calc(100% - 40px);
			.left{
				width: 212upx;
				background-color: #E1E3ED ;
				line-height: 88rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				
				.item{
					position: relative;
					text-align: center;
					&:not(:first-child) {
						// margin-top: 1px;
						&::after {
							content: '';
							display: block;
							height: 0;
							width: 620upx;
							position: absolute;
							top: -1px;
							right: 0;
							transform:scaleY(0.5);	/* 1px像素 */
						}
					}
					
					&.active,&:active{
						color: #0077FF;
						background-color: #fff;
					}
				}
			}
			.main{
				background-color: #fff;
				width: 0;
				width: 248upx;
				box-sizing: border-box;
				background-color: #EDEFF7 ;
				
				.swiper{
					height: 500px;
				}
		
				
				.item{
					padding-bottom: 10rpx;
				}
				
				.goods{
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: center;
					align-items: center;
					align-content: center;
					height: 88upx;
					font-size:32rpx;
					text-align: center;
					
					
				}
				.active{
						color: #0077FF;
						background-color: #fff;
					}
			}
			.main1{
				flex-grow: 1;
				background-color: white;
			.goods{
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				align-content: center;
				height: 88upx;
				font-size:32rpx;
			}
				}
		}
</style>
